/* 主题样式 */

/* 基础变量 */
:root {
  --app-font-size: 14px;
  --app-line-height: 1.5;
  --app-border-radius: 6px;
  --app-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --app-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
  
  /* 间距 */
  --app-spacing-xs: 4px;
  --app-spacing-sm: 8px;
  --app-spacing-md: 16px;
  --app-spacing-lg: 24px;
  --app-spacing-xl: 32px;
  
  /* 动画 */
  --app-transition: all 0.2s ease;
  --app-transition-slow: all 0.3s ease;
}

/* 浅色主题 */
.light-theme {
  --app-bg-primary: #ffffff;
  --app-bg-secondary: #f8f9fa;
  --app-bg-tertiary: #e9ecef;
  
  --app-text-primary: #212529;
  --app-text-secondary: #6c757d;
  --app-text-tertiary: #adb5bd;
  
  --app-border-primary: #dee2e6;
  --app-border-secondary: #e9ecef;
  
  --app-accent-primary: #409eff;
  --app-accent-secondary: #67c23a;
  --app-accent-warning: #e6a23c;
  --app-accent-danger: #f56c6c;
  
  --app-code-bg: #f8f9fa;
  --app-code-border: #e9ecef;
}

/* 深色主题 */
.dark-theme {
  --app-bg-primary: #1a1a1a;
  --app-bg-secondary: #2d2d2d;
  --app-bg-tertiary: #404040;
  
  --app-text-primary: #ffffff;
  --app-text-secondary: #b3b3b3;
  --app-text-tertiary: #808080;
  
  --app-border-primary: #404040;
  --app-border-secondary: #2d2d2d;
  
  --app-accent-primary: #409eff;
  --app-accent-secondary: #67c23a;
  --app-accent-warning: #e6a23c;
  --app-accent-danger: #f56c6c;
  
  --app-code-bg: #2d2d2d;
  --app-code-border: #404040;
}

/* 紧凑模式 */
.compact-mode {
  --app-spacing-xs: 2px;
  --app-spacing-sm: 4px;
  --app-spacing-md: 8px;
  --app-spacing-lg: 12px;
  --app-spacing-xl: 16px;
  
  --app-font-size: 13px;
  --app-line-height: 1.4;
}

.compact-mode .el-button {
  padding: 4px 8px;
  font-size: 12px;
}

.compact-mode .el-input {
  --el-input-height: 28px;
}

.compact-mode .el-card {
  --el-card-padding: 12px;
}

/* 全局样式应用 */
html {
  font-size: var(--app-font-size);
  line-height: var(--app-line-height);
}

body {
  background-color: var(--app-bg-primary);
  color: var(--app-text-primary);
  transition: var(--app-transition);
}

/* 代码块样式 */
.code-block {
  background-color: var(--app-code-bg);
  border: 1px solid var(--app-code-border);
  border-radius: var(--app-border-radius);
  padding: var(--app-spacing-md);
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.4;
  overflow-x: auto;
}

/* 滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--app-bg-secondary);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--app-border-primary);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--app-text-tertiary);
}

/* 卡片样式 */
.app-card {
  background-color: var(--app-bg-primary);
  border: 1px solid var(--app-border-primary);
  border-radius: var(--app-border-radius);
  box-shadow: var(--app-shadow);
  transition: var(--app-transition);
}

.app-card:hover {
  box-shadow: var(--app-shadow-hover);
}

/* 按钮样式增强 */
.el-button {
  transition: var(--app-transition);
}

/* 输入框样式增强 */
.el-input__wrapper {
  transition: var(--app-transition);
}

/* 表格样式增强 */
.el-table {
  --el-table-border-color: var(--app-border-primary);
  --el-table-bg-color: var(--app-bg-primary);
  --el-table-tr-bg-color: var(--app-bg-primary);
  --el-table-row-hover-bg-color: var(--app-bg-secondary);
}

/* 菜单样式增强 */
.el-menu {
  --el-menu-bg-color: var(--app-bg-primary);
  --el-menu-hover-bg-color: var(--app-bg-secondary);
  --el-menu-item-font-color: var(--app-text-primary);
  --el-menu-active-color: var(--app-accent-primary);
}

/* 对话框样式增强 */
.el-dialog {
  --el-dialog-bg-color: var(--app-bg-primary);
  --el-dialog-box-shadow: var(--app-shadow-hover);
}

/* 抽屉样式增强 */
.el-drawer {
  --el-drawer-bg-color: var(--app-bg-primary);
}

/* 下拉菜单样式增强 */
.el-dropdown-menu {
  --el-dropdown-menu-box-shadow: var(--app-shadow-hover);
  --el-dropdown-menuItem-hover-fill: var(--app-bg-secondary);
}

/* 工具提示样式增强 */
.el-tooltip__popper {
  --el-tooltip-bg-color: var(--app-bg-tertiary);
  --el-tooltip-text-color: var(--app-text-primary);
}

/* 加载动画 */
@keyframes app-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.app-loading {
  animation: app-spin 1s linear infinite;
}

/* 淡入动画 */
@keyframes app-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.app-fade-in {
  animation: app-fade-in 0.3s ease-out;
}

/* 响应式设计 */
@media (max-width: 768px) {
  :root {
    --app-spacing-md: 12px;
    --app-spacing-lg: 16px;
    --app-spacing-xl: 20px;
  }
  
  .compact-mode {
    --app-spacing-md: 6px;
    --app-spacing-lg: 8px;
    --app-spacing-xl: 12px;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  :root {
    --app-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --app-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.4);
  }
  
  .light-theme {
    --app-border-primary: #000000;
    --app-text-secondary: #000000;
  }
  
  .dark-theme {
    --app-border-primary: #ffffff;
    --app-text-secondary: #ffffff;
  }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}